<template>
	<a-spin :loading="loading" style="width: 100%">
		<a-card class="general-card" :header-style="{ paddingBottom: 0 }" :body-style="{
        paddingTop: '20px',
      }" :title="$t('workplace.contentData')">
			<template #extra>
				<a-link>{{ $t('workplace.viewMore') }}</a-link>
			</template>
			<Chart height="289px" :option="chartOption" />
		</a-card>
	</a-spin>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { graphic } from 'echarts';
	import useLoading from '@/hooks/loading';
	import useChartOption from '@/hooks/chart-option';
	import { ToolTipFormatterParams } from '@/types/echarts';
	import { AnyObject } from '@/types/global';
	import dayjs from 'dayjs';

	function graphicFactory(side: AnyObject) {
		return {
			type: 'text',
			bottom: '8',
			...side,
			style: {
				text: '',
				textAlign: 'center',
				fill: '#4E5969',
				fontSize: 12,
			},
		};
	}
	const {
		loading,
		setLoading
	} = useLoading(true);
	const xAxis = ref < string[] > ([]);
	const chartsData = ref < number[] > ([]);
	const graphicElements = ref([
		graphicFactory({
			left: '2.6%'
		}),
		graphicFactory({
			right: 0
		}),
	]);
	const {
		chartOption
	} = useChartOption(() => {
		return {
			grid: {
				left: '2.6%',
				right: '0',
				top: '10',
				bottom: '30',
			},
			xAxis: {
				type: 'category',
				offset: 2,
				data: xAxis.value,
				boundaryGap: false,
				axisLabel: {
					color: '#4E5969',
					formatter(value: number, idx: number) {
						if(idx === 0) return '';
						if(idx === xAxis.value.length - 1) return '';
						return `${value}`;
					},
				},
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					interval: (idx: number) => {
						if(idx === 0) return false;
						if(idx === xAxis.value.length - 1) return false;
						return true;
					},
					lineStyle: {
						color: '#E5E8EF',
					},
				},
				axisPointer: {
					show: true,
					lineStyle: {
						color: '#23ADFF',
						width: 2,
					},
				},
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: false,
				},
				axisLabel: {
					formatter(value: any, idx: number) {
						if(idx === 0) return value;
						return `${value}k`;
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: '#E5E8EF',
					},
				},
			},
			tooltip: {
				trigger: 'axis',
				formatter(params) {
					const [firstElement] = params as ToolTipFormatterParams[];
					return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${(
              Number(firstElement.value) * 10000
            ).toLocaleString()}</span></div>
          </div>`;
				},
				className: 'echarts-tooltip-diy',
			},
			graphic: {
				elements: graphicElements.value,
			},
			series: [{
				data: chartsData.value,
				type: 'line',
				smooth: true,
				// symbol: 'circle',
				symbolSize: 12,
				emphasis: {
					focus: 'series',
					itemStyle: {
						borderWidth: 2,
					},
				},
				lineStyle: {
					width: 3,
					color: new graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: 'rgba(30, 231, 255, 1)',
						},
						{
							offset: 0.5,
							color: 'rgba(36, 154, 255, 1)',
						},
						{
							offset: 1,
							color: 'rgba(111, 66, 251, 1)',
						},
					]),
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(17, 126, 255, 0.16)',
						},
						{
							offset: 1,
							color: 'rgba(17, 128, 255, 0)',
						},
					]),
				},
			}, ],
		};
	});
	interface ContentDataRecord {
		x: string;
		y: number;
	}
	const fetchData = async() => {
		setLoading(true);
		try {
			const presetData = [58, 81, 53, 90, 64, 88, 49, 79];
			const getLineData = () => {
				const count = 8;
				return new Array(count).fill(0).map((el, idx) => ({
					x: dayjs()
						.day(idx - 2)
						.format('YYYY-MM-DD'),
					y: presetData[idx],
				}));
			};
			const chartData = getLineData();
			chartData.forEach((el: ContentDataRecord, idx: number) => {
				xAxis.value.push(el.x);
				chartsData.value.push(el.y);
				if(idx === 0) {
					graphicElements.value[0].style.text = el.x;
				}
				if(idx === chartData.length - 1) {
					graphicElements.value[1].style.text = el.x;
				}
			});
		} catch(err) {
			console.log(err)

		} finally {
			setLoading(false);
		}
	};
	fetchData();
</script>

<style scoped lang="less">
	.echarts-tooltip-diy {
		background: linear-gradient( 304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%) !important;
		border: none !important;
		backdrop-filter: blur(10px) !important;
		/* Note: backdrop-filter has minimal browser support */
		border-radius: 6px !important;
		.content-panel {
			display: flex;
			justify-content: space-between;
			padding: 0 9px;
			background: rgba(255, 255, 255, 0.8);
			width: 164px;
			height: 32px;
			line-height: 32px;
			box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
			border-radius: 4px;
			margin-bottom: 4px;
		}
		.tooltip-title {
			margin: 0 0 10px 0;
		}
		p {
			margin: 0;
		}
		.tooltip-title,
		.tooltip-value {
			font-size: 13px;
			line-height: 15px;
			display: flex;
			align-items: center;
			text-align: right;
			color: #1d2129;
			font-weight: bold;
		}
		.tooltip-item-icon {
			display: inline-block;
			margin-right: 8px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
		}
	}
</style>